<template>
    <div>
        <div class="navbar">
            <span class="iconfont icon-fanhui-tongyong" @click="$router.go(-1)"></span>
            <span class="toUser">{{toUser.name}}</span>
        </div>
        <div v-for="message in chatMessages">
            <chart-row :chatMessage="message" :userinfo="userInfo" :to-user="toUser"></chart-row>
        </div>

        <div class="sendMessage">

            <label>
                <input type="text" class="message-input" v-model="message" focus="true" placeholder="说点什么吧"/>
            </label>
            <span class="iconfont icon-fasong" @click="send"></span>
        </div>
    </div>
</template>

<script>
    import chartRow from '../components/UserComponents/chat-row'


    export default {

        components: {
            chartRow
        },
        data() {
            return {
                message: "",
                chatMessages: [],
                userInfo: "",
                toUser: "",
                chatSession: ""
            }
        },
        methods: {
            send() {

                let singleRequest = {
                    toUserName: this.toUser.name,
                    fromUserName: this.userInfo.name,
                    fromUid: this.userInfo.uuid,
                    toUid: this.toUser.uuid,
                    message: this.message,
                    toUserImg: this.toUser.img,
                    date: new Date().getTime()
                }

                this.$socket.emit('chat', singleRequest, (data) => {
                    this.outputMessage(singleRequest)
                    singleRequest.date = this.dateFormat("YYYY-mm-dd HH:MM", new Date())
                })
                this.message = ""
            },
            outputMessage(msg) {
                this.chatMessages.push(msg)
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }

                }

                return fmt;
            }
        },
        async mounted() {
            const res = await this.$http.get("/user/userinfo")

            this.userInfo = res.data.data
            if (this.$route.query.message) {
                this.chatSession = JSON.parse(this.$route.query.message)

                this.$http.post("/chat/history", this.chatSession).then((res) => {
                    const uf = this.userInfo
                    res.data.data.forEach((x) => {
                        if (x.toUid === uf.uuid) {
                            x.left = true;
                        } else {
                            x.left = false
                        }
                    })

                    this.chatMessages = res.data.data


                    if (this.chatSession.toUser !== this.userInfo.uuid) {
                        this.$http.get("/user/userinfo", {params: {uuid: this.chatSession.toUser}}).then(res => {
                            this.toUser = res.data.data
                        })
                    } else {
                        this.$http.get("/user/userinfo", {params: {uuid: this.chatSession.fromUser}}).then(res => {
                            this.toUser = res.data.data
                        })
                    }
                })
            } else {
                this.$http.get("/user/userinfo", {params: {uuid: this.$route.query.uuid}}).then((res) => {
                    this.toUser = res.data.data
                })
            }


            this.$socket.on('connect', (data) => {
                console.log(data)
            });
            this.$socket.on('chat', (data) => {
                data.left = true
                this.outputMessage(data)
            });

        }
    }
</script>

<style lang="scss">
    .navbar {
        display: flex;
        align-items: center;
        padding: 2.104vw 0;

        .icon-fanhui-tongyong {
            margin-left: 2vw;
        }

        .toUser {
            margin-left: 5.042vw;
        }
    }

    .sendMessage {
        position: fixed;
        width: 100%;
        bottom: 0;
        background-color: rgba($color: #ffa1ba, $alpha: 1.0);
        display: flex;
        justify-content: center;
        align-items: center;

        .message-input {
            border: 0;
            background-color: rgba($color: #ffa1ba, $alpha: 1.0);
            padding: 5px 0;
            width: 50%;
        }
    }
</style>
